<div class="subheader" ng-if="model.form">
  <div class="fixed-container">
    <div class="btn-group pull-right">
      <button type="button" class="btn btn-default" ng-click="openEditor()" ng-if="model.form.latestVersion">
        <i class="glyphicon glyphicon-edit icon-and-label"></i> {{ 'FORM.ACTION.OPEN-IN-EDITOR' | translate }}
      </button>
      <button type="button" class="btn btn-default" ng-click="useAsNewVersion()" ng-if="!model.form.latestVersion">
        {{ 'FORM.ACTION.USE-AS-NEW-VERSION' | translate }}
      </button>
    </div>
    <div class="btn-group pull-right">
      <button
        type="button"
        class="btn btn-default"
        ng-click="editForm()"
        ng-disabled="!model.form.latestVersion"
        title="{{ 'FORM.ACTION.EDIT' | translate }}"
      >
        <i class="glyphicon glyphicon-pencil"></i>
      </button>
      <button
        type="button"
        class="btn btn-default"
        ng-click="duplicateForm()"
        ng-disabled="!model.form.latestVersion"
        title="{{ 'FORM.ACTION.DUPLICATE' | translate }}"
      >
        <i class="editor-icon editor-icon-copy"></i>
      </button>
      <button
        type="button"
        class="btn btn-default"
        ng-click="deleteForm()"
        title="{{ 'FORM.ACTION.DELETE' | translate }}"
        ng-disabled="!model.form.latestVersion"
      >
        <i class="glyphicon glyphicon-trash"></i>
      </button>
    </div>
    <div class="pull-right">
      <a ng-click="returnToList()" class="action">&larr; {{ 'GENERAL.ACTION.RETURN-TO-LIST' | translate }}</a>
    </div>
    <h2>
      <span class="version">v{{ model.form.version }}</span
      >{{ model.form.name }}
    </h2>
    <div class="clearfix">
      <div class="col-xs-4 details">
        <span><i class="glyphicon glyphicon-user"></i>{{ 'FORM.DETAILS.CREATED-BY' | translate: model.form }}</span>
        <span
          ><i class="glyphicon glyphicon-pencil"></i>{{ 'FORM.DETAILS.LAST-UPDATED-BY' | translate: model.form }}</span
        >
      </div>
      <div class="col-xs-8 details clearfix">
        <div class="related btn-group">
          <button
            id="toggle-history"
            type="button"
            class="btn btn-subtle"
            ng-click="toggleHistory($event)"
            title="{{ 'FORM.ACTION.EDIT' | translate }}"
          >
            {{ 'FORM.DETAILS.HISTORY-TITLE' | translate }}
            <span class="counter" ng-show="model.versions.data.length">{{ model.versions.data.length }}</span>
          </button>
        </div>
        <p ng-if="model.form.description">
          {{ model.form.description }}
        </p>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid content" ng-if="model.form" auto-height offset="40">
  <div class="center-pane" style="overflow-x:hidden">
    <div class="content roweditor-canvas container-fluid" ng-controller="FormReadonlyViewController">
      <div id="canvasSection" class="content-canvas-wrapper" ng-class="{'editing': editState.editing}">
        <ul style="min-height:400px; width: 100%" class="form-canvas content-canvas">
          <li ng-repeat="field in formItems track by field._guid" class="form-field-wrapper" ng-class="{'oneCol':(field.layout.row==1),'towCol':(field.layout.row == 2),'threeCol':(field.layout.row == 3),'fourCol':(field.layout.row == 4)}">
            <div form-builder-element form-element="field" edit-state="editState" form-mode="formMode"></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
